<template>
  <div id="HomeView">
    <a-carousel
      :autoPlay="true"
      animation-name="card"
      show-arrow="never"
      indicator-position="outer"
      :style="{
        width: '100%',
        height: '240px',
      }"
    >
      <a-carousel-item
        v-for="image in images"
        :key="image"
        :style="{ width: '50%' }"
      >
        <img
          :src="image"
          :style="{
            width: '100%',
          }"
        />
      </a-carousel-item>
    </a-carousel>
    <a-divider />
    <div :style="{ display: 'flex' }">
      <a-card
        class="card-demo"
        :style="{ display: 'inline-block', width: 'auto' }"
        title="最新的题目"
        hoverable
      >
        <NewCreateQuestionView />
      </a-card>
      <a-card
        class="card-demo"
        :style="{ display: 'inline-block', width: 'auto' }"
        title="热门题目"
        hoverable
      >
        <HotQuestionView />
      </a-card>
    </div>
    <a-divider />
  </div>
</template>

<script setup lang="ts">
import NewCreateQuestionView from "@/views/Home/NewCreateQuestionView.vue";
import HotQuestionView from "@/views/Home/HotQuestionView.vue";

//轮播图
const images = [
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp",
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp",
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp",
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp",
];
</script>

<style scoped>
#questionView {
  max-width: 1280px;
  margin: 0 auto;
}

.card-demo {
  width: 360px;
  margin-left: 24px;
  transition-property: all;
}

.card-demo:hover {
  transform: translateY(-4px);
}
</style>
